<template>
  <div
    ref="table"
    class="table-pannel"
    :class="{
      readonly: readonly === true,
      'is-anywhere-selected': TABLE.selectedState.cells?.length,
      'has-border': border
    }"
    @click="TABLE.closeMenus()"
    @mousemove.prevent
  >
    <virtualScroll 
      :oneDataHeight='24' 
      v-model:sourceDataList="dataSource"
      :rowKey="rowKey"
      @contextmenuRight="TABLE.openMenus()"
      :openVirtualScroll="!!openVirtualScroll"
      class="table-warp"
      :style="tableWarpStyle"
      @scroll="y => emits('scroll', y)"
      @scroll-last="emits('scroll-last')"
      v-bind="typeof openVirtualScroll === 'boolean' ? undefined : openVirtualScroll"
    >
      <template #thead>
        <thead
          class="t-head"
          :class="{
            sticky: ![undefined, false].includes(stickyHead),
            'sticky-top': ![undefined, false].includes(stickyHead),
          }"
        >
          <tr :class="{
            'first-selected': TABLE.isFirstSelectedTr(TABLE.getMinStartY()),
            // 'selected-row': TABLE.isSelectRow(-1),
          }" data-rowindex="-1">
            <!-- 表头行选中 -->
            <th
              v-if="rowSelection"
              class="row-check"
              :class="{
                sticky: rowSelection?.fixed,
                'sticky-left-chosed': rowSelection?.fixed,
              }"
            >
              <slot name="headerSelect">
                <Checkbox
                  :checked="toValue(TABLE.rowsCheckAll)"
                  :indeterminate="toValue(TABLE.rowsIndeterminate)"
                  @change="TABLE.selectAllRowHandel()"
                ></Checkbox>
              </slot>
            </th>
            <!-- 行号表头 -->
            <th
              v-if="showRowIndex || showRowDrag"
              class="row-index"
              :class="{
                sticky: ![undefined, false].includes(stickyIndex),
                'sticky-left': ![undefined, false].includes(stickyIndex),
                'has-rowSelection': rowSelection?.fixed,
                'only-drag': showRowDrag && !showRowIndex,
                'only-index': !showRowDrag && showRowIndex,
              }"
            >
              <slot v-if="showRowIndex" name="headerRowindex">
                {{ toValue(TABLE.getMessage('index')) }}
              </slot>
            </th>
            <!-- 表头 -->
            <th
              v-for="(th, index) of columns"
              :key="th.dataIndex"
              :style="{ width: TABLE.getThWidth(index), minWidth: th.minWidth + 'px' }"
              data-rowindex="-1"
              :data-colindex="index"
              :class="{
                'selected': TABLE.isSelectCol(index),
                'first-selected': TABLE.isFirstSelectedTh(index),
                'last-selected': TABLE.isLastSelectedTh(index),
              }"
              @mousedown="TABLE.selectColumnsMousedown(index)"
            >
              <div class="th-cell">
                <slot name="headerCell" :column="th" :title="th.title">
                  <slot :name="`head-${th.slotName || th.dataIndex}`">
                    {{ th.title }}
                  </slot>
                </slot>
                <i v-if="th.sorter" class="sorter-icon" :class="{
                  ascend: th.sortOrder === 'ascend',
                  descend: th.sortOrder === 'descend'
                }" @click.stop="TABLE.sortHandel(th)" @mousedown.stop></i>
              </div>
              <div
                v-if="resizeCol"
                class="handel-resize"
                @mousedown.prevent.stop="TABLE.startResize(index)"
              >
                <slot name="resize-icon">
                  <img
                    class="iconfont icon-tuozhuai"
                    src="./icon/tuozhuai.png"
                    alt=""
                  />
                </slot>
              </div>
            </th>
          </tr>
        </thead>
      </template>
      <template #default="{item, rowindex}">
        <tr
          :class="{
            selected: TABLE.isSelectedTr(rowindex),
            'selected-row': TABLE.isSelectRow(rowindex),
            'first-selected': TABLE.isFirstSelectedTr(rowindex),
            'last-selected': TABLE.isLastSelectedTr(rowindex),
            'readonly-row': TABLE.checkHasReadonly([item]),
            'disable-edit-row' :TABLE.checkHasDisable([item])
          }"
          :data-rowindex="rowindex"
          @click="customRow?.(item, rowindex).onClick?.()"
          @dblclick="customRow?.(item, rowindex).onDblclick?.()"
          @contextmenu="customRow?.(item, rowindex).onContextmenu?.()"
          @mouseenter="customRow?.(item, rowindex).onMouseenter?.()"
          @mouseleave="customRow?.(item, rowindex).onMouseleave?.()"
          v-bind="customRow?.(item, rowindex)"
        >
          <!-- 行选中 -->
          <td
            v-if="rowSelection"
            class="row-check"
            :class="{
              sticky: rowSelection.fixed,
              'sticky-left-chosed': rowSelection.fixed,
            }"
            @click.stop
            @dblclick.stop
          >
            <Checkbox
              :value="item[rowKey]"
              :disabled="toValue(TABLE.disabeldCheckedRowKeys).includes(item[rowKey])"
              :checked="TABLE.rowIsSelection(item)"
              @change="TABLE.selectRowHandel(item, rowindex)"
            ></Checkbox>
          </td>
          <!-- 行号 -->
          <td
            v-if="showRowIndex || showRowDrag"
            class="row-index"
            :data-rowindex="rowindex"
            :class="{
              sticky: ![undefined, false].includes(stickyIndex),
              'sticky-left': ![undefined, false].includes(stickyIndex),
              'has-rowSelection': rowSelection?.fixed,
              'only-drag': showRowDrag && !showRowIndex,
              'only-index': !showRowDrag && showRowIndex,
            }"
            @mousedown="TABLE.selectRowsMousedown(rowindex)"
          >
            <slot v-if="showRowDrag" name="drag-icon">
              <img
                class="sort-handel iconfont icon-tuodong"
                :src="DragIcon"
              />
            </slot>
            {{ showRowIndex ? rowindex + 1 : '' }}
          </td>
          <!-- 表格数据 -->
          <template v-for="(col, colindex) of columns" :key="col.dataIndex">
            <td
              :class="{
                selected: TABLE.isSelectedTd(rowindex, colindex),
                sticky: col.fixed,
                [`sticky-${col.fixed}`]: col.fixed,
                'first-selected': TABLE.isFirstSelectedTd(colindex),
                'last-selected': TABLE.isLastSelectedTd(colindex),
                'error': TABLE.isCellError(item, col),
              }"
              :data-rowindex="rowindex"
              :data-colindex="colindex"
              @mousedown="
                TABLE.setDefaultRowData(rowindex);
                TABLE.selectMousedownHandel(rowindex, colindex);
              "
              @click.prevent="TABLE.clickEditHandel(rowindex, colindex)"
              @dblclick.prevent="TABLE.dblclickEditHandel(rowindex, colindex)"
            >
              <div
                class="td-cell"
                :class="{
                  [col.align]: !!col.align,
                }"
                :style="{ width: TABLE.getThWidth(colindex) }"
              >
                <slot
                  :name="col.slotName || 'bodyCell'"
                  :isEditer="TABLE.isEditer(rowindex, colindex)"
                  :record="item"
                  :text="TABLE.getValueByModel(col.dataIndex, item)"
                  :index="rowindex"
                  :column="columns[colindex]"
                >
                  <!-- 文本 -->
                  <template
                    v-if="
                      [undefined, 'text', 'number'].includes(
                        columns[colindex].type,
                      )
                    "
                  >
                    <Input
                      :value="TABLE.getValueByModel(col.dataIndex, item)"
                      @update:value="val => TABLE.setValueByModel(col.dataIndex, item, val)"
                      :is-editer="TABLE.isEditer(rowindex, colindex)"
                      :type="columns[colindex].type"
                      :open-tooltip="columns[colindex].tooltip"
                      :auto-tooltip="columns[colindex].autoTooltip"
                      :disabled="columns[colindex].disabled"
                    />
                  </template>
                  <!-- 下拉框 -->
                  <template v-else-if="columns[colindex].type === 'select'">
                    <Select
                      :value="TABLE.getValueByModel(col.dataIndex, item)"
                      @update:value="val => TABLE.setValueByModel(col.dataIndex, item, val)"
                      :is-editer="TABLE.isEditer(rowindex, colindex)"
                      :options="columns[colindex].options"
                      :open-tooltip="columns[colindex].tooltip"
                      :auto-tooltip="columns[colindex].autoTooltip"
                      :disabled="columns[colindex].disabled"
                    ></Select>
                  </template>
                </slot>
              </div>
              <div
                v-if="
                  TABLE.isLastSelectedTd(colindex) &&
                  TABLE.isLastSelectedTr(rowindex)
                "
                class="drag-core"
                @click.stop
                @mousedown.stop="TABLE.dragContruneHandel"
              ></div>
            </td>
          </template>
        </tr>
      </template>
    </virtualScroll>

    <Teleport to="body" v-if="toValue(TABLE.menuList)?.filter?.((item) => TABLE.visableMenu(item))?.length">
      <div>
        <div
          class="actions edit-table-menus"
          :class="wrapMenusClassName"
          v-if="toValue(TABLE.menuList).length && toValue(TABLE.showMenus)"
          v-show="toValue(TABLE.showMenus)"
          :style="TABLE.menuPosition"
          :key="'' + TABLE.editState.editX + TABLE.editState.editY"
          @mouseup.stop
          @mousedown.stop
          @click.stop
        >
          <template v-for="item of toValue(TABLE.menuList)"
          :key="item.key">
            <Button
              v-if="TABLE.visableMenu(item)" 
              class="action-list"
              :class="{
                disable: item._disabled,
              }"
              @mouseup="TABLE.menuClickHandel(item)"
              :disabled="item._disabled"
              @keydown.stop
            >
              <Form layout="inline" :model="item.inputProps ?? {}" :ref="vnode => item.vForm = vnode">
                <FormItem 
                  name="value" 
                  :rules="item.validator && [{ validator: () => item.validator?.(item, toValue(TABLE.selectAreasData), TABLE) }]"
                > 
                  <component v-if="item.label?.__v_isVNode" :is="item.label"></component>
                  <template v-else>
                    <template
                      v-if="
                        [
                          DEFAULT_MENU.ADD_STEP_DOWN,
                          DEFAULT_MENU.INSERT_BEFORE_ROWS,
                          DEFAULT_MENU.INSERT_AFTER_ROWS,
                          DEFAULT_MENU.INSERT_COPY_AFTER_ROWS,
                        ].includes(item.key)
                      "
                    >
                      {{ item.label?.split('[input]')[0] }}
                      <InputNumber
                        v-if="item.input"
                        class="action-input"
                        :disabled="item._disabled"
                        v-model:value="item.inputProps.value"
                        v-bind="item.inputProps"
                        @mouseup.stop
                        @click.stop
                        @pressEnter="TABLE.menuClickHandel(item)"
                      ></InputNumber>
                    </template>
                    <template v-else>{{ item.label }}</template>
                    <template
                      v-if="
                        [
                          DEFAULT_MENU.INSERT_BEFORE_ROWS,
                          DEFAULT_MENU.INSERT_AFTER_ROWS,
                          DEFAULT_MENU.INSERT_COPY_AFTER_ROWS,
                        ].includes(item.key)
                      "
                    >
                      {{ item.label?.split('[input]')[1] }}
                    </template>
                  </template>
                </FormItem>
              </Form>
            </Button>
          </template>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, computed, provide, onMounted, toValue } from 'vue';
import { Checkbox, InputNumber, Button, Form, FormItem, Table } from 'ant-design-vue';
import { editTableVue3Props } from "./plugins/edit-table"
import EditTable from './plugins/core';
import { DEFAULT_MENU, PROVIDE_READONLY, PROVIDE_EDIT_STATE, FieldPath } from './plugins/core/type';
import Select from './components/select-simple.vue';
import Input from './components/input.vue';
import DragIcon from "./icon/drag-icon.png"
import virtualScroll from "./components/virtual-scroll.vue"

const props = defineProps(editTableVue3Props());
const emits = defineEmits(['afterInsertEmptyRow', 'warning', "scroll", "scroll-last"]);
const table = shallowRef(null);
const columns = defineModel('columns', { default: [] });
const dataSource = defineModel('dataSource', { default: [] });

const TABLE = new EditTable({
  table,
  columns,
  dataSource,
  props,
  emits,
});
provide(PROVIDE_EDIT_STATE, TABLE.editState);
provide(PROVIDE_READONLY, computed(() => {
  const readonly = TABLE.checkHasReadonly(TABLE.selectAreasData.value.records) || TABLE.checkHasDisable(TABLE.selectAreasData.value.records)
  return readonly
}));

onMounted(() => {
  table.value?.style?.setProperty('--selected-border-color', props.selectedStyleBorderColor)
  table.value?.style?.setProperty('--selected-border-width', props.selectedStyleBorderWidth)
  table.value?.style?.setProperty('--selected-bg-color', props.selectedBgcolor)
  table.value?.style?.setProperty('--hover-bg-color', props.hoverRowBgcolor)
})

defineExpose({
  validate: () => TABLE.validate(),
  validateFields:  (filedList?: FieldPath[], rowindex?: number) => TABLE.validateFields(filedList, rowindex),
  clearValidate: (filedList?: FieldPath[], rowindex?: number) => TABLE.clearValidate(filedList, rowindex),
  scrollToField: () => TABLE.scrollToField(),
})
</script>

<style scoped lang="less">
@keyframes error-huxi {
  0%, 66.66% {
    background-color: transparent;
  }
  33.33%, 100%{
    background-color: rgba(255, 77, 79, 0.3);
  }
}
.table-pannel {
  position: relative;
  user-select: none;
  &.readonly,
  .readonly-row,
  .disable-edit-row {
    .sort-handel,
    :deep(.select-down-icon),
    :deep(.select-remove-icon) {
      display: none !important;
    }
  }
}
.table-warp {
  overflow: auto;
  height: 100%;
  max-height: inherit;
  max-width: 100%;
}
:deep(table),
table {
  border-collapse: collapse;
  user-select: none;
  text-align: left;
}
.t-head {
  background-color: #eee;
}
.th-cell {
  position: relative;
  white-space: nowrap; /* 确保文本在一行内显示 */
  display: inline-flex;
}
.handel-resize {
  position: absolute;
  right: -5px;
  top: 0;
  height: 100%;
  width: 10px;
  z-index: 100;
  cursor: col-resize;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.handel-resize .iconfont {
  display: block;
  transform: rotate(90deg) scaleY(0.5);
  color: #bbb;
  width: 100%;
}
th:last-child {
  .handel-resize {
    right: 0;
  }
}
.row-check,
.row-index {
  width: 40px;
  min-width: 40px;
  color: rgba(0, 0, 0, 0.85);
  position: relative;
  padding-left: 14px;
  background-color: #f5f5f5;
}
.only-drag {
  width: 12px;
  min-width: 12px;
  padding-left: 0;
}
.only-index {
  padding-left: 0;
  text-align: center;
}
th.row-index {
  background-color: #eee;
  padding-left: 0 !important;
  text-align: center;
}
.row-check {
  padding-left: 0 !important;
  text-align: center;
}
.sort-handel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(100, 100, 100, 0.1);
  color: #999;
  font-size: 10px;
  display: flex;
  align-items: center;
  opacity: 0;
  cursor: pointer;
  width: 10px;
  height: 100%;
  object-fit: contain;
}
.row-index:hover .sort-handel {
  opacity: 1;
}
.selected-row {
  background-color: var(--selected-bg-color) !important;
}
th,
td {
  box-sizing: border-box;
  position: relative;
  padding: 0;
  height: 24px;
  line-height: 23px;
  &.error::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 8;
    border: 1px solid #e70000;
    // background-color: rgba(255, 77, 79, 0.3);
    // animation: error-huxi 700ms ease-out;
  }
}
.has-border {
  th,td,
  :deep(th, td) {
    border: 1px solid #ccc;
  }
}
:deep(.overflow-text),
.overflow-text {
  overflow: hidden; /* 确保超出容器的内容被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}
.td-cell {
  display: flex;
  align-items: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 23px;
  *{
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
  }
  & >* {
    flex: 1;
  }
  &.left {
    justify-content: flex-start;
  }
  &.center {
    justify-content: center;
  }
  &.right {
    justify-content: flex-end;
  }
}
.th-cell,
.td-cell {
  padding-left: 1px;
  padding-right: 1px;
  box-sizing: border-box;
}
.drag-core {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--selected-border-color);
  width: 6px;
  height: 6px;
  cursor: crosshair;
  z-index: 11;
  display: none !important;
}

tr {
  // transition: background 50ms linear;
  &.disable-edit-row {
    opacity: 0.5 !important;
    cursor: not-allowed;
    background-color: #f5f5f5;
  }
  &:hover {
    background-color: var(--hover-bg-color);
  }
  th.selected,
  td.selected {
    background-color: var(--selected-bg-color);
  }
  th.selected::after,
  td.selected::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    pointer-events: none;
    z-index: 9;
  }
  &.first-selected {
    th.selected::after,
    td.selected::after {
      border-top: var(--selected-border-width) solid var(--selected-border-color);
    }
  }
  &.last-selected {
    td.selected::after {
      border-bottom: var(--selected-border-width) solid var(--selected-border-color);
    }
  }
  .first-selected::after {
    border-left: var(--selected-border-width) solid var(--selected-border-color);
  }
  .last-selected::after {
    border-right: var(--selected-border-width) solid var(--selected-border-color);
  }
  &:first-child {
    td.selected::after {
      top: -0.5px;
    }
  }
}
.table-pannel:not(.has-border) tr{
  th.selected::after,
  td.selected::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
.is-anywhere-selected{
  tr{
    th.selected::after,
    td.selected::after{
      border: var(--selected-border-width) solid var(--selected-border-color);
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }
}
td {
  :deep(.ant-input-affix-wrapper),
  :deep(.ant-input-number),
  :deep(input),
  .select,
  select,
  input,
  textarea {
    border: none !important;
    outline: none;
    background-color: transparent;
    font-size: 1em;
    resize: none;
    color: #000 !important;
    width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
    height: 23px !important;
    line-height: 21px !important;
    box-shadow: none !important;
  }
  :deep(input) {
    padding-right: 2px;
    padding-left: 1px;
    &::placeholder,
    &::input-placeholder {
      color: rgba(0, 0, 0, 0.4) !important;
    }
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    &[type='number'] {
      -moz-appearance: textfield;
    }
  }
}
:deep(.ant-input-number-handler-wrap) {
  display: none !important;
}
.actions {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1051;
  min-width: 156px;
  // border: 1px solid #ddd;
  border-radius: 2px;
  padding: 2px;
  background-color: #fff;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  .action-input {
    width: 40px;
    height: 21px;
    margin: 0 10px;
    line-height: 21px;
    :deep(input) {
      text-align: center;
      line-height: 21px;
      height: 21px;
      padding: 0 1px;
    }
  }
}
.action-list {
  cursor: pointer;
  margin: 1px 0;
  border-radius: 2px;
  padding: 4px 10px !important;
  margin: 1px 0;
  display: flex;
  height: unset !important;
  align-items: center;
  border: none;
  box-shadow: none !important;
  &:not(.disable):hover {
    background-color: #e9f4fa;
    color: #000;
  }
  &.disable {
    background-color: transparent;
    cursor: not-allowed !important;
    :deep(.ant-form-item-control-input-content),
    :deep(.input){
      opacity: 0.45;
    }
  }
  .ant-form{
    width: 100%;
    line-height: 1;
    text-align: left;
  }
  .ant-form-item{
    width: 100%;
    margin-inline-end: 0px;
    :deep(.ant-form-item-control-input){
      min-height: 0 !important;
    }
    :deep(.ant-form-item-explain-error){
      font-size: 0.9em;
    }
  }
  
}

:deep(.ant-form-item) {
  margin-bottom: 0;
}
td {
  :deep(.select-down-icon),
  :deep(.select-remove-icon) {
    // opacity: 0;
  }
  :deep(.ant-select) {
    height: 21px;
    .ant-select-selector {
      border: none !important;
      background-color: transparent !important;
      padding: 0 !important;
      height: inherit;
      box-shadow: none !important;
    }
    .ant-select-arrow {
      // opacity: 0;
      inset-inline-end: 4px;
    }

    &.ant-select-open .ant-select-selection-item {
      color: inherit !important;
    }
  }
  &:hover :deep(.ant-select) {
    .ant-select-arrow {
      opacity: 1;
    }
  }
  &:hover :deep(.select-down-icon),
  &:hover :deep(.select-remove-icon) {
    opacity: 1;
  }
}
:deep(.ant-select-dropdown) {
  z-index: 10;
  .ant-select-item-option-selected {
    background-color: #007fff !important;
  }
}

.sticky {
  position: sticky;
  z-index: 10;
  &.sticky-left-chosed {
    padding-left: 0;
    text-align: center;
    left: 0px;
    &::after {
      content: '';
      position: absolute;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      background-color: #f5f5f5;
      top: 0;
      bottom: 0;
      right: -1px;
      left: -1px;
      z-index: -1;
      // box-shadow: 6px 0 10px rgba(0, 0, 0, 0.08);
    }
  }
  &.sticky-left {
    left: 0px;
    &.has-rowSelection {
      left: 40px;
    }
    &::after {
      content: '';
      position: absolute;
      border-left: 1px solid #ccc;
      // border-bottom: 1px solid #ccc;
      background-color: #f5f5f5;
      top: 0;
      bottom: 0;
      right: 0px;
      left: -1px;
      z-index: -1;
      // box-shadow: 6px 0 10px rgba(0, 0, 0, 0.08);
    }
  }
  &.sticky-right {
    right: -1px;
  }
  &.sticky-top {
    top: 0px;
    box-shadow: -0.5px -0.5px 0.5px 0.5px #ccc;
    z-index: 12;
  }
  &.sticky-bottom {
    bottom: -1px;
  }
}

:deep(.disabled),
.disabled {
  color: rgba(0, 0, 0, 0.45) !important;
  cursor: not-allowed !important;
  // background-color: rgba(0, 0, 0, 0.02) !important;
}
:deep(.placeholder) {
  color: rgba(0, 0, 0, 0.4);
}
:deep(.ant-dropdown-placement-topLeft) {
  .options-box {
    transform: translateY(-100%);
  }
}
:deep(.ant-dropdown){
  z-index: 10;
}
.sorter-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
  cursor: pointer;
  &::after,
  &::before{
    content: "";
    display: block;
    border: 6px solid transparent;
  }
  &::before{
    border-bottom-color: #bbb;
    border-top: none;
    margin-bottom: 1px;
  }
  &::after{
    border-top-color: #bbb;
    border-bottom: none;
  }
  &.ascend::before {
    border-bottom-color: rgba(0, 127, 255, 0.8);
  }
  &.descend::after {
    border-top-color: rgba(0, 127, 255, 0.8);
  }
}
</style>
<style>
.edit-table-hidden-text{
  position: absolute;
  height: 0;
  overflow: hidden;
  display: block;
  max-width: unset !important;
  font-size: 14px;
}
</style>